<!--  打卡管理  -->
<template>
    <div class="signin">
        <div class="search">
            <el-form :model="searchData" :inline="true" size="mini" class="demo-form-inline">
                <el-form-item label="开始" prop="start_time">
                    <el-date-picker type="date" placeholder="请选择" v-model="searchData.start_time" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束" prop="end_time">
                    <el-date-picker type="date" placeholder="请选择" v-model="searchData.end_time" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="部门" prop="s_d_id">
                    <el-select v-model="searchData.s_d_id" placeholder="请选择部门" @change="obtainUsers">
                        <!-- <el-option v-for="(item,index) in optionName" :key="index" :label="item.name" :value="item.id"></el-option> -->
                        <el-option-group v-for="group in optionName" :key="group.label" :label="group.label">
                            <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-option-group>
                    </el-select>
                </el-form-item>
                <el-form-item label="员工" prop="employee_id">
                    <el-select v-model="searchData.employee_id" placeholder="请选择员工">
                        <el-option v-for="(item,index) in userTypes" :key="index" :label="item.u_username" :value="item.u_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="签到类型" prop="sign_type">
                    <el-select v-model="searchData.sign_type" placeholder="请选择">
                        <el-option label="上班" value="6"></el-option>
                        <el-option v-for="(item,index) in sign_type_opt" :key="index" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">查询</el-button>
                    <el-button type="primary" @click="signinKnockOff">下班打卡</el-button>
                </el-form-item>
            </el-form>  
        </div>

        <div class='content'>
            <div class='list'>
                <el-table :data="list.data" tooltip-effect="dark" style="width: 100%">

                    <el-table-column align="center" prop="name" label="部门" width="120"></el-table-column>
                    <el-table-column align="center" prop="u_username" label="员工" width="120"></el-table-column>
                    <el-table-column align="center" prop="date" label="打卡日期" width="140"></el-table-column>
                    <el-table-column align="center" prop="start_work_time" label="开始时间" width="140"></el-table-column>
                    <el-table-column align="center" prop="knock_off_time" label="结束时间" width="140"></el-table-column>
                    <el-table-column align="center" prop="hsa_status" label="考勤状态" width="100"></el-table-column>
                    <el-table-column align="center" prop="summary_work" label="考勤备注" width="100"></el-table-column>
                    <el-table-column align="center" prop="late_time" label="逾期时间" width="140"></el-table-column>
                    <el-table-column align="center" prop="sign_type" label="考勤类型" width="100"></el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination :current-page="current" @current-change="handleCurrentChange" :total="list.total" style="margin-top:30px;"></el-pagination>
            </div>
            <!-- 下班打卡 -->
            <el-dialog title="下班打卡" :visible.sync="signindialogVisible" width="50%">
                <el-form :model="form" ref="form" :rules="rules" size="mini" class="demo-form-inline">
                    <el-form-item label="签到类型" prop="sign_type">
                        <el-select v-model="form.sign_type" placeholder="请选择">
                            <el-option v-for="(item,index) in sign_type_opt" :key="index" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="考勤备注" prop="summary_work">
                        <el-input type="textarea" v-model="form.summary_work" :autosize="{ minRows: 4}"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="cancel" size="small">取 消</el-button>
                    <el-button type="primary" @click="submit('form')" size="small">确 认</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    // import "../../style/signin.css"
    import conf from '../../config/userconf.js'
    import permconfig from "../../config/permconfig.js"

  export default {
    data() {
      return {
          list:[],
          searchData:{
                start_time:'',
                end_time:'',
                sign_type:'',
                s_d_id:'',
                employee_id: '',
          },
          optionName: [],  //部门
          userTypes: [],  //员工
          sign_type_opt: [
              {name: '看房', value: '1'},
              {name: '勘察', value: '2'},
              {name: '跑盘', value: '3'},
              {name: '派单', value: '4'},
              {name: '培训', value: '5'},
            //   {name: '上班', value: '6'},
              {name: '下班', value: '7'},
              {name: '迟到', value: '8'},
              {name: '早退', value: '9'},
              {name: '午餐', value: '10'},
              {name: '晚餐', value: '11'},
              {name: '加班', value: '12'},
              {name: '外出', value: '13'},
              {name: '请假', value: '14'},
              {name: '休假', value: '15'},
              {name: '陪看', value: '16'},
              {name: '其他', value: '0'},
          ],
          current: 1,  //页码
          form: {
              sign_type: '',
              summary_work: '',
          },
          rules: {
              sign_type: [
                  { required: false, message: '请选择签到类型', trigger: 'change' }
              ],
              summary_work: [
                  { required: false, message: '请输入工作内容', trigger: 'blur' }
              ],
          },
          signindialogVisible: false,    //下班打卡弹框  隐藏显示  
          initdate: true,  //默认日期
      }
    },
    methods: {
        /* 列表*/
        getList (data=Object()){
            data.page = this.current;
            conf.signin.rankings(data,(state,res)=>{
                if (state == 'success'&&res.data.code == 0){
                    // console.log(res);
                    this.list = res.data.data;
                    if(this.initdate){
                        this.searchData.start_time = res.data.start;
                        this.searchData.end_time = res.data.end;
                    }
                }else if(state == 'success'&&res.data.code != 0){
                    if(res.data.code == 401){
                        this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                    }else if(res.data.code == -404){
                        this.list = [];
                        if(this.initdate){
                            this.searchData.start_time = res.data.msg.start;
                            this.searchData.end_time = res.data.msg.end;
                        }
                    }else{
                        this.$message({
                            type: 'info',
                            message: res.data.msg
                        });
                    }
                    
                }
            })
        },
        /*查询 */
        search () {
            this.initdate = false;
            let data  = this.searchData;

            this.getList(data);
        },
        // 切换页码
        handleCurrentChange(val) {
            this.current = val;
            let data  = this.searchData;

            this.getList(data);
        },
        //下班打卡
        signinKnockOff(){
            this.signindialogVisible = true;
            
        },
        //下班打卡，取消
        cancel(){
            this.signindialogVisible = false;
        },
        /*下班打卡    提交 */
        submit (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.judgeprimise();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        /*判断提交 */
        judgeprimise (data=null) {
            //下班打卡，并清除token 退出登陆
            conf.signin.finish(this.form,(state,res)=>{
                if (state == 'success'&&res.data.code == 0){
                    this.$message({
                        type: 'success',
                        message: res.data.data
                    });
                    this.signindialogVisible = false;
                    this.$confirm('您确定要退出系统吗?', '', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //确定
                         localStorage.clear(); 
                        //localStorage.removeItem('token');  //清除token登录态
                        this.$router.push({name:'login'});   //登陆态失效，跳转至登录页

                    }).catch(() => {
                        this.getList();
                        //取消
                        this.$message({
                            type: 'info',
                            message: '已取消退出'
                        });          
                    });
                }else if(state == 'success'&&res.data.code != 0){
                    if(res.data.code == 401){
                        this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                    }else{
                        this.$message({
                            type: 'info',
                            message: res.data.msg
                        });
                    } 
                }
            })
        },
        //上班状态
        check_typeFun(row, column, cellValue, index){
            switch (cellValue) {
                case 1:
                    return '正常'
                case 2:
                    return '迟到'
            }
        },
        //下班状态
        end_typeFun(row, column, cellValue, index){
            switch (cellValue) {
                case 1:
                    return '正常'
                case 2:
                    return '早退'
            }
        },

        //获取部门
        obtainName(data=Object()){
            conf.department.nameOpt(data,(state,res)=>{
                if (state == 'success'&&res.data.code == 0){
                    this.optionName = res.data.data;
                    // console.log(res); 
                }else if(state == 'success'&&res.data.code != 0){
                    if(res.data.code == 401){
                        this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                    }else if(res.data.code == -404){
                        this.optionName = [];
                    }else{
                        this.$message({
                            type: 'info',
                            message: res.data.msg
                        });
                    }
                }
            },"qx_qita_dakaliebiao_chakan")
        },
        //获取部门员工
        obtainUsers(val,data=Object()){
            this.userTypes = [];
            this.searchData.employee_id = '';
            data.d_id = val;
            var ownerPermission = window.localStorage.getItem('authories');
            var arr = ownerPermission.split(',');

            // console.log('------------',permconfig);
            if(arr.indexOf(permconfig.qx_qita_dakaliebiao_benren_chakan)  > -1){
                this.userTypes = [{
                    "u_id":window.localStorage.getItem('uid'),
                    "u_username":window.localStorage.getItem("uname")
                }]
                return;
            }
            conf.department.userOpt(data,(state,res)=>{
                if (state == 'success'&&res.data.code == 0){
                    // console.log(res); 
                    this.userTypes = res.data.data;
                }else if(state == 'success'&&res.data.code != 0){
                    if(res.data.code == 401){
                        this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                    }else{
                        this.$message({
                            type: 'info',
                            message: res.data.msg
                        });
                    }
                }
            })
        },
    },
    mounted (){
        this.$nextTick(function(){
            this.getList();
            this.obtainName();
        })
    },
        
  }
</script>